<template>
  <div class="footer">
    <div v-if="this.recommendMenuList.length">
      <a @click="checkRecommend">查看我的推荐</a>
      <van-popup v-model="showRecommend">
        <ul v-if="currentRecommendMenu.length > 0" class="list-items">
          <li v-for="item in currentRecommendMenu" :key="item.id" class="list-item">
            <img :src="'/static/'+item.image" :alt="item.name" v-if="item.image" />
            <img :src="demoImage" :alt="item.name" v-else />
            <span v-text="item.sale+'折'" v-if="item.sale" class="sale"></span>
            <div class="list-info">
              <h4 v-html="item.name"></h4>
              <span v-text="'￥' + formatPrice(item.price, item.sale)" v-if="item.sale" class="price-sale"></span>
              <span v-text="'￥' + item.price" :class="{'line-through': item.sale}" class="price-normal"></span>
            </div>
          </li>
        </ul>
      </van-popup>
    </div>
    <div v-else>
      你暂时还没有推荐
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import resetMenuList from '@/utils/global'

export default {
  name: 'index',
  computed: mapState(['getRecommendMenu']),
  data: function () {
    return {
      demoImage: require('../../assets/demo.png'),
      recommendMenuList: this.$store.getters.getRecommendMenu,
      menuArray: [],
      showRecommend: false,
      currentRecommendMenu: []
    }
  },
  mounted: function () {
    this.menuArray = resetMenuList()
  },
  methods: {
    checkRecommendMenuList: function () {
      this.recommendMenuList.forEach((goods, index) => {
        let currentGoods = this.menuArray.filter(item => item.id === goods)
        this.currentRecommendMenu.push(currentGoods[0])
      })
    },
    checkRecommend: function () {
      this.currentRecommendMenu = []
      this.checkRecommendMenuList()
      this.showRecommend = true
    },
    formatPrice (price, sale) {
      return Number(price * sale / 10).toFixed(2)
    }
  },
  watch: {
    recommendMenuList: function () {
      if (this.recommendMenuList && this.recommendMenuList.length > 0) {
        this.checkRecommendMenuList()
      }
    },
    showRecommend: function () {
      if (!this.showRecommend) {
        this.currentRecommendMenu = []
      }
    }
  }
}
</script>

<style scoped lang="less">
  .footer {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, .5);
    padding: 10px 15px;
    text-align: center;
    color: #fff;
    line-height: 20px;
  }
  ul.list-items{
    color: #333;
    text-align: left;
    > li{
      position: relative;
      margin-bottom: 20px;
      max-width: 300px;
      .sale{
        position: absolute;
        right: 0;
        top: 0;
        background-color: #ff0000;
        color: #fff;
        font-style: italic;
        padding: 2px 8px 2px 5px;
        display: block;
      }
      .list-info{
        position: relative;
        margin: 5px 10px 10px;
        padding-right: 80px;
        h4{
          margin-bottom: 10px;
          + span{
            font-size: 16px;
            color: orange;
          }
        }
        .button-function{
          position: absolute;
          right: 0;
          top: 0;
          width: 70px;
          text-align: right;
          button + button {
            margin-top: 2px;
          }
        }
      }
    }
    > li:last-child{
      margin-bottom: 0;
    }
  }
  .van-popup{
    width: 70%;
    border-radius: 5px;
  }
</style>
